解决vue-router路由拦截造成死循环问题
笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置const router = new Router({routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, children: [{...
2024-01-10
vue-router 路由懒加载
webpack打包会将所有资源文件合并压缩成一个文件，导致最终的文件非常大，甚至超过几M，以致页面首次加载会比较慢，如下图：其中红色标出的是在浏览器中加载的js文件，gzip压缩前已经达到500多KB了。再看看路由按需加载后：文件被拆成一个个小的文件，即webpack的文件分割。这里是以页面为单位...
2024-01-10
对 Vue-Router 进行单元测试的方法
由于路由通常会把多个组件牵扯到一起操作，所以一般对其的测试都在 端到端/集成 阶段进行，处于测试金字塔的上层。不过，做一些路由的单元测试还是大有益处的。对于与路由交互的组件，有两种测试方式：使用一个真正的 router 实例mock 掉 $route 和 $router 全局对象因为大多数 Vue 应用用的都...
2024-01-10
vue-router重定向 不刷新问题
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。 问题描述: 之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。 解决方法： 通过阅读vue-ro...
2024-01-10
vue-router怎么动态配置，比如根据用户权限不同显示路由
1、vue-router怎么动态配置，比如根据用户权限不同显示路由如上图，我想根据用户权限不同，动态添加删除菜单下面是路由配置const routes = [ { path: '/', component: Home, name: '系统管理', iconCls: 'el-icon-setting', children: [ { path: '/Page12', component: Page12, name: '组织机构' }, { path: '/...
2024-01-10
vue-router 安装和基本使用
1、安装npm install vue-router --save2、src下创建router文件夹并创建index.js文件 ---- /src/router/index.jsindex.js/* * @Description: web router * @Author: wangwz10@lenovo.com * @LastEditors: wangwz10@lenovo.com * @Date: 2020-05-28 15:48:40 * @LastEditTime: 2021-02-04 10:3...
2024-01-10
vue-router路由导航守卫中next控制实现
使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：// 全局导航守卫router.beforEach((to, from, next) => {if('no login'){next(...
2024-01-10
vue静态路由vue-router怎么使用
静态路由vue-router使用路由可以方便我们访问多个组件，后面也会使用到路由跳转中安装:npm install vue --save-devnpm install vue-router --save-dev引入模块router在App.vue里面加写入 <router-view></router-view>在命令提示行输入 “npm run dev” 执行项目在浏览器输入域名地址 “域名地址+路由地址” 如： http://localhost:...
2024-01-10
vue-computed计算属性
计算属性：用来封装你想对一个属性进行的操作computed VS mothod实现的效果和定义一个methods中的function相同，但是他们的区别在于：methods的function当触发重新渲染时总会重新执行，而计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖进行改变时才会改变，这就意味着它的相关依赖没有发生改...
2024-01-10
请问使用vue-router与v-show分别实现选项卡有什么区别？
我们开发项目，无论是后台管理系统，还是移动应用，经常会使用到各式各样类似选项卡的切换组件，如下：1、管理后台：2、选项卡：3、移动端底部tabber:问题如下：1、实现这种类选项卡组件有2中方法：分别是 vue-router的嵌套路由 和 v-show, 请问2种实现有什么区别（个人看不出区别），来回切换时，能否缓存原本查看的内容呢？什么时候使用vue-router的嵌套路由，什么时候使用v-sh...
2024-03-14
vue与react的区别
1.创建者等react是Facebook公司创建的js框架，并创新了新的语法，JSX（html in javascript），而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。2.关于虚拟dom改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。·Virtual DOM是一...
2024-01-10
react和vue对比
相同点都支持服务器端渲染都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范数据驱动视图都有支持native的方案,React的React native,Vue的weex不同点React严格上只针对MVC的view层,Vue则是MVVM模式virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件...
2024-01-10
浅谈vue和react的数据流和绑定
就数据流来说：Vue和React均是单向数据流传递，举个例子：单向数据流指只能从一个方向修改数据，姑且我们可以这样理解，如下图所示。一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的...
2024-01-10Mega 和 SecureSafe 之间的区别
兆丰MEGA 是一种基于云的服务，可以从任何具有 Internet 访问权限的设备或平台访问。它主要是为基于浏览器的应用程序设计的。此外，它还为 Windows、Android 手机和 Apple 手机准备了移动应用程序。MEGA 于 2013 年 1 月 20 日创建，正好是美国政府臭名昭著的摧毁 Megaupload 一年后。它由 Kim Dotcom、Mathias Ortmann ...
2024-01-10
vue中echarts引入中国地图的案例
如下所示：<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom，初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeMyChartContainer ...
2024-01-10
vue3新特性及和vue2的区别
vue3新特性：更快更小更易于维护更多原生支持更易于开发使用重写虚拟DOM优化插槽生成静态树提升基于Proxy的观察者机制使vue更小1） 以es5为基础，更小更快。（快：Proxy重构虚拟dom功能，小：支持tree-shaking，运行时的最小体积将低于10kb）2） 支持TS 3.0源码使用TS编写（Typescript）3）优化插槽...
2024-01-10这vue个抽奖轮盘不展示滚动效果呢（就是滚动时isActive没有效果，只有开始和结束是展示的）？
<li class="itemLi" v-for="(item,index) in initData.awardConfigList" :key="index"> <div class="startButton" v-if="index == 4" @click="onStart">-{{initData.conPoint}}积分</div> ...
2024-02-06
euv和duv区别
品牌型号：iPhone 14系统：iOS 16.1.2euv和duv区别：1、制程范围不同。duv：基本上只能做到25nm，Intel凭借双工作台的模式做到了10nm，却无法达到10nm以下。euv：能满足10nm以下的晶圆制造，并且还可以向5nm、3nm继续延伸。2、发光原理不同。duv：光源为准分子激光，光源的波长能达到193纳米。euv：激光激发等离子来发射EUV光子，光源的波长则为...
2024-02-02
vue和react对比
区别：1：vue使用模板语法，和HTML很相似，因此初学者易上手。 2：react使用JSX，它要求开发者借助JSX在JavaScript中创建DOM。3：vue更快，这是因为，react渲染是将所有子组件都渲染一遍，如果想要避免不必要的渲染，则需要使用pureComponent或者手动实现shouldComponentUpdate, 而vue优化了这个问题，自动实现了s...
2024-01-10
vue清除定时器，clearInterval
let time = 10 let intervalFunc = window.setInterval(() => { time = time - 1 if (time < 1) { window.clearInterval(intervalFunc) } }, 1000)...
2024-01-10
vue中v-show和v-if的异同
一、官方解释：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么...
2024-01-10
Vue-Devtools插件使用
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包12cd vue-devtoolscnpm install3.修改manifest.json文件把"persistent":false改成true 4.编译...
2024-01-10
vue中ts写的代码必须加分号吗？
第一次在vue中用ts，发现会保存后会自动加上分号，不加分号会报错vscode配置时不加分号的，请问下这种情况该怎么处理Step1:Install eslint-config-prettier:npm install --save-dev eslint-config-prettier prettierStep2:add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it la...
2024-01-10
vue-devtools使用问题？
Chorm浏览器打开控制器vue项目就报关闭就不会有这个错，大佬们 这怎么弄回答：这有个文章和你的问题一样：https://blog.csdn.net/egg_er/article/details/124679458这个如果不行试试：在谷歌游览器中移除devtools插件，再重新添加一下。目前我用的 "vue": "^2.7.10" 插件4.14 没有报错回答：试一下使用低版本的vue dev...
2024-03-01
vue之slot用法
slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。一、单个组件如果子组件的模板不包含 slot，那么父组件的内...
2024-01-10
Vue.js常用指令：v-model
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。使用v-model可以在表单控件或者组件上创建双向绑定。代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
2024-01-10
Vue中的slot，作用域插槽和具名插槽
1、具名插槽有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。//组件调用时<MyFooter v-red :age.sync="age"> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>list</div> </template></MyFooter>//书写组件时<template> ...
2024-01-10
vue-简单的todolist
<template><div class="root"><!-- <div class="bg" style="font-size:0"><img v-bind:src="imgArr[cur_img_index]"><img v-bind:src="imgArr[cur_img_index]"> ...
2024-01-10
深入理解vue中的slot与slot-scope
写在前面vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。实际上，插槽的概念很简单，下面...
2024-01-10
vue中的slot（插槽）
原文地址：https://www.cnblogs.com/loveyt/p/9946450.htm什么是插槽？插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组...
2024-01-10
